<template>
  <div class="mod-config" style="width: 100%;height: 100%;min-height: 815px;">
    <!--<center>-->
      <!--<div style="font-size: 20px;color: #909399">站内推送暂未完善，请前往友盟后台推送<a href="https://passport.umeng.com/login?appId=push_portal&output=embed" target="_blank">[立即前往]</a>，如有不便，请联系管理员（友盟账户密码及试用方式请联系管理员获取）</div>-->
    <!--</center>-->
    <el-card class="box-card" style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
      <el-form ref="dataForm" :model="dataForm" label-width="100px" :rules="rules">
        <el-form-item label="推送类型：" >
          <el-select v-model="dataForm.type" placeholder="推送类型" style="width: 300px">
            <el-option :key="1" label="打开app" :value="1"></el-option>
            <el-option :key="2" label="商品" :value="2"></el-option>
            <el-option :key="4" label="秒杀活动" :value="4"></el-option>
            <el-option :key="5" label="联盟店" :value="5"></el-option>
            <el-option :key="6" label="web页面" :value="6"></el-option>
            <el-option :key="7" label="商品分类" :value="7"></el-option>
            <el-option :key="8" label="联盟店分类" :value="8"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推送内容：" prop="content">
          <el-input v-model="dataForm.content" type="textarea" placeholder="推送内容" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="选择数据：" >
          <div v-if="dataForm.type!==6">
            <el-button @click="open">点击选择数据</el-button>
            {{dataForm.data.showData}}
          </div>
          <el-input type="textarea" v-else v-model="dataForm.data.data" placeholder="web链接" style="width: 300px"></el-input>
        </el-form-item>

        <el-form-item label="接收端：" prop="platform">
          <el-radio-group v-model="dataForm.platform">
            <el-radio label="0">送贝商城</el-radio>
            <el-radio label="1">送贝商家端</el-radio>
            <el-radio label="2">送贝骑手</el-radio>
          </el-radio-group>
        </el-form-item>

        <div style="color: #c2c5cd;margin-bottom: 10px;">---- 推送目标人群（不选择的话默认是所有人） --------------------------</div>

        <el-form-item label="用户活跃度：">
          <el-input placeholder="时长" class="input-with-select" style="width: 300px" v-model="dataForm.duration" :disabled="dataForm.registTime!==''">
            <el-select v-model="dataForm.isActive" slot="prepend" placeholder="请选择" style="width: 100px">
              <el-option label="活跃" :value="true"></el-option>
              <el-option label="不活跃" :value="false"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="用户类型：" >
          <el-select v-model="dataForm.userType" style="width: 300px" :disabled="dataForm.registTime!==''">
            <el-option label="区域运营商" value="regionalOperators"></el-option>
            <el-option label="普通联盟店" value="generalAllianceStore"></el-option>
            <el-option label="消费者" value="consumer"></el-option>
            <el-option label="VIP会员" value="vip"></el-option>
            <el-option label="中级版联盟店" value="midlevelAllianceStore"></el-option>
            <el-option label="高级版联盟店" value="superiorAllianceStore"></el-option>
            <el-option label="城市合伙人" value="cityPartner"></el-option>
            <el-option label="城市合伙人联盟店" value="cityPartnerAllianceStore"></el-option>
          </el-select>
        </el-form-item>

        <div style="color: #c2c5cd;margin-bottom: 10px;">---- 其他 （已下推送条件不能与上面的推送条件并行）---------------</div>

        <el-form-item label="新注册用户：">
          <el-input placeholder="多少天内注册的新用户" style="width: 300px" v-model="dataForm.registTime"></el-input>
        </el-form-item>

        <el-button @click="send" type="primary">发送推送</el-button>
      </el-form>
    </el-card>
    <alliance-store-info v-if="allianceStoreInfoVisible" ref="allianceStoreInfo" @refreshDataList="" @addAllianceAtoreInfo="setData"></alliance-store-info>
    <goods v-if="goodsVisible" ref="goods" @refreshDataList="" @addGoods="setData"></goods>
    <spike-activity v-if="spikeActivityVisible" ref="spikeActivity" @refreshDataList="" @addSpikeActivity="setData"></spike-activity>
    <goods-class v-if="goodsClassVisible" ref="goodsClass" @refreshDataList="" @addGoodsClass="setData"></goods-class>
    <alliance-store-class v-if="allianceStoreClassVisible" ref="allianceStoreClass" @refreshDataList="" @addAllianceStoreClass="setData"></alliance-store-class>
  </div>
</template>

<script>
  import AllianceStoreInfo from './alliance-store-info'
  import Goods from './goods'
  import SpikeActivity from './spike-activity'
  import GoodsClass from './goods-class'
  import AllianceStoreClass from './alliance-store-class'
  export default {
    data () {
      return {
        allianceStoreInfoVisible: false,
        goodsVisible: false,
        spikeActivityVisible: false,
        goodsClassVisible: false,
        allianceStoreClassVisible: false,
        dataForm: {
          platform: '0',
          type: 1,
          content: '',
          data: {},
          isActive: '',
          duration: '',
          registTime: '',
          userType: ''
        },
        rules: {
          content: [
            {required: true, message: '内容不能为空', trigger: 'blur'}
          ],
          platform: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    components: {
      AllianceStoreInfo,
      Goods,
      SpikeActivity,
      GoodsClass,
      AllianceStoreClass
    },
    methods: {
      open () {
        debugger
        switch (this.dataForm.type) {
          case 2:
            this.goodsVisible = true
            this.$nextTick(() => {
              this.$refs.goods.init()
            })
            break
          case 4:
            this.spikeActivityVisible = true
            this.$nextTick(() => {
              this.$refs.spikeActivity.getDataList()
            })
            break
          case 5:
            this.allianceStoreInfoVisible = true
            this.$nextTick(() => {
              this.$refs.allianceStoreInfo.getDataList()
            })
            break
          case 7:
            this.goodsClassVisible = true
            this.$nextTick(() => {
              this.$refs.goodsClass.getDataList()
            })
            break
          case 8:
            this.allianceStoreClassVisible = true
            this.$nextTick(() => {
              this.$refs.allianceStoreClass.getDataList()
            })
            break
        }
      },
      setData (data) {
        this.dataForm.data = data
      },
      send () {
        debugger
        let tempValid = false
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) {
            tempValid = true
          }
        })
        if (tempValid) {
          this.$message.error('数据有误')
          return
        }

        // 校验活跃度
        if (this.dataForm.isActive !== '' && this.dataForm.duration === '') {
          this.$message.error('数据有误')
          return
        }

        if (this.dataForm.isActive === '' && this.dataForm.duration !== '') {
          this.$message.error('数据有误')
          return
        }

        // 校验额外数据
        if (this.dataForm.type === 6 && this.dataForm.data.data === undefined) {
          debugger
          this.$message.error('数据不能为空')
          return
        }

        if ((this.dataForm.isActive !== '' || this.dataForm.duration !== '' || this.dataForm.userType !== '') && this.dataForm.registTime !== '') {
          this.$message.error('两种推送方式不能同步')
          return
        }
        let than = this
        this.$confirm('确认发送吗？此操作不可撤回。')
          .then(_ => {
            this.$http({
              url: than.$http.adornUrl('push/operatorPushByCondition'),
              method: 'post',
              data: JSON.stringify({
                'data': than.dataForm.data.data,
                'type': than.dataForm.type,
                'content': than.dataForm.content,
                'platform': than.dataForm.platform,
                'isActive': than.dataForm.isActive,
                'duration': than.dataForm.duration,
                'registTime': than.dataForm.registTime,
                'userType': than.dataForm.userType
              }),
              headers: {
                'Content-Type': 'application/json; charset=utf-8'
              }
            }).then(({data}) => {
              if (data && data.code === 200) {
                than.$message({
                  message: '推送已发送',
                  type: 'success',
                  duration: 800,
                  onClose: () => {
                    Object.assign(than.$data, than.$options.data())
                  }
                })
              } else {
                than.$message.error(data.msg)
              }
            })
          })
          .catch(_ => {})
      }
    }
  }
</script>
